<template>
  <section class="chartBox">
    <div v-if="loading"></div>

    <el-row v-else>
      <!-- 选择框 部分图才有 -- 且不是选择人的选择框-->
      <section v-if="selectOption && selectOption.length" class="selectForm">
        <el-form-item>
          <el-select
            v-model="selectValue"
            :placeholder="placeholder"
            :style="{ width: multiple ? '360px' : '200px' }"
            @change="changeSelect"
            :multiple="multiple"
            filterable
            collapse-tags
            collapse-tags-tooltip
            clearable
          >
            <el-option
              v-for="item in selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </section>

      <!-- 有搜索功能的图 有margin-top -->
      <el-col
        :span="24"
        :style="{
          marginTop: !!props.signChartName ? '30px' : '0px'
        }"
      >
        <chart :option="option" />
      </el-col>
    </el-row>
  </section>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import chart from './chart.vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  option: {
    type: Object,
    required: true
  },
  // 如果这个图有下拉选择框
  selectOption: {
    type: Object
  },
  // 下拉框提示语
  placeholder: {
    type: String
  },
  // 唯一标识那些可以单独操作下拉框搜索的图
  signChartName: {
    type: String
  },
  // 首次渲染时，默认选中的订单信息
  defaultOrderInfo: {
    type: Object
  },
  // 是否可以多选
  multiple: {
    type: Boolean
  }
})

// 如果有下拉框选择，选择的值
const selectValue = ref<string>('')

// 监听是否传了默认订单。传了的话默认订单赋值给选中的
watch(
  () => props.defaultOrderInfo,
  () => {
    if (props.defaultOrderInfo) {
      selectValue.value = props.defaultOrderInfo?.orderId
    }
  }
)

// 使用 defineEmits 定义多个事件及其类型
const emit = defineEmits<{
  (event: 'updateSelect', value: string, signChartName: string): void
}>()

// 选择框值变化，触发父组件修改数据
const changeSelect = () => {
  emit('updateSelect', selectValue.value, props.signChartName ?? '')
}

// 重置搜索选项 -- 若是选订单，则还是保留默认订单。否则置空
const resetSelectedValue = () => {
  if (props.defaultOrderInfo) {
    selectValue.value = props.defaultOrderInfo?.orderId
  } else {
    selectValue.value = ''
  }
}

// 暴露方法给父组件
defineExpose({ resetSelectedValue })
</script>
